<template>
	<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="show" style="width: 100%;">
		<view class="bg-white solid-top shadow flex justify-center align-center" style="width: 100%;height: 240upx;flex-direction: column;">
			<view class="flex justify-around align-center" style="height: 240upx;width: 100%;">
				<view @tap="clickItem('post')" class="flex justify-start align-center" style="flex-direction: column;">
					<image src="/static/images/setting/post_publish.png" style="width: 66upx;height: 66upx;">
					</image>
					<text class="text-black text-df text-bold">帖子</text>
				</view>
				<view @tap="clickItem('active')" class="flex justify-start align-center"
					style="flex-direction: column;">
					<image src="/static/images/setting/active_post.png" style="width: 66upx;height: 66upx;"></image>
					<text class="text-black text-df text-bold">动态</text>
				</view>
				<view @tap="clickItem('topic')" class="flex justify-start align-center" style="flex-direction: column;">
					<image src="/static/images/setting/topic.png" style="width: 66upx;height: 66upx;"></image>
					<text class="text-black text-df text-bold">话题</text>
				</view>
				<view @tap="clickItem('circle')" class="flex justify-start align-center"
					style="flex-direction: column;">
					<image src="/static/images/setting/circle.png" style="width: 66upx;height: 66upx;"></image>
					<text class="text-black text-df text-bold">圈子</text>
				</view>
			</view>
		</view>
	</uni-transition>
</template>

<script>
	import uniTransition from '@/components/uni-transition/components/uni-transition/uni-transition.vue'
	export default {
		name: "PublishChoose",
		components: {
			uniTransition
		},
		data() {
			return {
				themeColor: this.ThemeColor,
				show: false,
				modeClass: 'fade',
			};
		},
		methods: {
			switchStatus() {
				if (this.show) {
					this.hiddenTabbar()
				} else {
					this.showTabbar()
				}
			},
			showTabbar() {
				if (this.show) {
					return
				}
				this.show = true
				this.modeClass = ['fade', 'slide-bottom']
			},
			hiddenTabbar() {
				if (!this.show) {
					return
				}
				this.show = false
				this.modeClass = ['fade', 'slide-bottom']
			},
			clickItem(type) {
				this.switchStatus()
				if (type == 'post') {
					uni.navigateTo({
						url: '/pages/publish/publish'
					})
				}
				if (type == 'active') {
					uni.navigateTo({
						url: '/pages/publish/publish-active?fromIndex=1'
					})
				}
				if (type == 'topic') {
					uni.navigateTo({
						url: '/pages/always/create-topic/create-topic'
					})
				}
				if (type == 'circle') {
					uni.navigateTo({
						url: '/pages/lessuse/create-circle/create-circle'
					})
				}
			}
		},
	}
</script>

<style lang="scss">

</style>
